<!--
 * @FilePath: src/views/Dashboard/ElementCrossplot.vue
 * @Description: ElementCrossplot.vue
-->
<template>
  <div class="element-crossplot echart-dashbaord">
    <el-row>
      <label>第一组：</label>
      <el-checkbox-group v-model="group1" :min="0" :max="2" @change="changeGroup1">
        <el-checkbox v-for="it in options" :label="it.label" :key="it.value">{{ it.label }}</el-checkbox>
      </el-checkbox-group>
    </el-row>

    <el-row>
      <label>第二组：</label>
      <el-checkbox-group v-model="group2" :min="0" :max="2" @change="changeGroup2">
        <el-checkbox v-for="it in options" :label="it.label" :key="it.value">{{ it.label }}</el-checkbox>
      </el-checkbox-group>
    </el-row>

    <el-row>
      <label>第三组：</label>
      <el-checkbox-group v-model="group3" :min="0" :max="2" @change="changeGroup3">
        <el-checkbox v-for="it in options" :label="it.label" :key="it.value">{{ it.label }}</el-checkbox>
      </el-checkbox-group>
    </el-row>

    <el-row>
      <label>第四组：</label>
      <el-checkbox-group v-model="group4" :min="0" :max="2" @change="changeGroup4">
        <el-checkbox v-for="it in options" :label="it.label" :key="it.value">{{ it.label }}</el-checkbox>
      </el-checkbox-group>
    </el-row>

    <!-- <el-row>
      <el-button type="primary" @click="drawEchart">确定</el-button>
    </el-row> -->
    <div ref="chart" class="echart-container"></div>
  </div>
</template>

<script>
import chart_mixin from "./chart-mixin.js"
import { dataset_head, coordinate } from "./dataset/element-cross.js"

const symbolSize = 4
const option = {
  title: [
    { text: "", left: "25%", top: "3%", textAlign: "center" },
    { text: "", left: "75%", top: "3%", textAlign: "center" },
    { text: "", left: "25%", top: "50%", textAlign: "center" },
    { text: "", left: "75%", top: "50%", textAlign: "center" }
  ],
  grid: [
    { left: "6%", top: "6%", width: "41%", height: "41%" },
    { right: "6%", top: "6%", width: "41%", height: "41%" },
    { left: "6%", bottom: "6%", width: "41%", height: "41%" },
    { right: "6%", bottom: "6%", width: "41%", height: "41%" }
  ],
  tooltip: { formatter: "({a}): {c}" },
  xAxis: [{ gridIndex: 0 }, { gridIndex: 1 }, { gridIndex: 2 }, { gridIndex: 3 }],
  yAxis: [{ gridIndex: 0 }, { gridIndex: 1 }, { gridIndex: 2 }, { gridIndex: 3 }],
  series: [
    {
      name: "group1",
      type: "scatter",
      xAxisIndex: 0,
      yAxisIndex: 0,
      symbolSize,
      data: []
    },
    {
      name: "group2",
      type: "scatter",
      xAxisIndex: 1,
      yAxisIndex: 1,
      symbolSize,
      data: []
    },
    {
      name: "group3",
      type: "scatter",
      xAxisIndex: 2,
      yAxisIndex: 2,
      symbolSize,
      data: []
    },
    {
      name: "group4",
      type: "scatter",
      xAxisIndex: 3,
      yAxisIndex: 3,
      symbolSize,
      data: []
    }
  ],
  graphic: [
    // {
    //   type: "group",
    //   left: "40%",
    //   top: "8%",
    //   children: [
    //     {
    //       type: "rect",
    //       shape: { width: 120, height: 60 },
    //       style: {
    //         fill: "rgba(173, 216, 230, 0.2)", // 浅蓝色背景
    //         stroke: "#1E90FF",
    //         lineWidth: 1
    //       }
    //     },
    //     {
    //       type: "text",
    //       left: 10,
    //       top: 15,
    //       style: {
    //         text: "K-Si交汇说明",
    //         font: "bold 12px Microsoft YaHei",
    //         fill: "#333"
    //       }
    //     },
    //     {
    //       type: "text",
    //       left: 10,
    //       top: 35,
    //       style: {
    //         text: "K: 70 | Si: 50",
    //         font: "10px Microsoft YaHei",
    //         fill: "#666"
    //       }
    //     }
    //   ]
    // },
    // {
    //   type: "group",
    //   left: "65%",
    //   top: "8%",
    //   children: [
    //     {
    //       type: "rect",
    //       shape: { width: 120, height: 60 },
    //       style: {
    //         fill: "rgba(144, 238, 144, 0.2)", // 浅绿色背景
    //         stroke: "#32CD32",
    //         lineWidth: 1
    //       }
    //     },
    //     {
    //       type: "text",
    //       left: 10,
    //       top: 15,
    //       style: {
    //         text: "Al-Ca交汇说明",
    //         font: "bold 12px Microsoft YaHei",
    //         fill: "#333"
    //       }
    //     },
    //     {
    //       type: "text",
    //       left: 10,
    //       top: 35,
    //       style: {
    //         text: "Al: 25 | Ca: 15",
    //         font: "10px Microsoft YaHei",
    //         fill: "#666"
    //       }
    //     }
    //   ]
    // },
    // {
    //   type: "group",
    //   left: "15%",
    //   top: "58%",
    //   children: [
    //     {
    //       type: "rect",
    //       shape: { width: 120, height: 60 },
    //       style: {
    //         fill: "rgba(255, 255, 0, 0.2)", // 浅黄色背景
    //         stroke: "#FFD700",
    //         lineWidth: 1
    //       }
    //     },
    //     {
    //       type: "text",
    //       left: 10,
    //       top: 15,
    //       style: {
    //         text: "Mg-S交汇说明",
    //         font: "bold 12px Microsoft YaHei",
    //         fill: "#333"
    //       }
    //     },
    //     {
    //       type: "text",
    //       left: 10,
    //       top: 35,
    //       style: {
    //         text: "Mg: 0.8 | S: 0.6",
    //         font: "10px Microsoft YaHei",
    //         fill: "#666"
    //       }
    //     }
    //   ]
    // },
    // {
    //   type: "group",
    //   left: "65%",
    //   top: "58%",
    //   children: [
    //     {
    //       type: "rect",
    //       shape: { width: 120, height: 60 },
    //       style: {
    //         fill: "rgba(255, 99, 71, 0.2)", // 浅红色背景
    //         stroke: "#FF4500",
    //         lineWidth: 1
    //       }
    //     },
    //     {
    //       type: "text",
    //       left: 10,
    //       top: 15,
    //       style: {
    //         text: "P-Fe交汇说明",
    //         font: "bold 12px Microsoft YaHei",
    //         fill: "#333"
    //       }
    //     },
    //     {
    //       type: "text",
    //       left: 10,
    //       top: 35,
    //       style: {
    //         text: "P: 0.2 | Fe: 0.2",
    //         font: "10px Microsoft YaHei",
    //         fill: "#666"
    //       }
    //     }
    //   ]
    // }
  ]
}
export default {
  name: "ElementCrossplot",
  mixins: [chart_mixin],
  data() {
    return {
      chart: null,
      group1: [],
      group2: [],
      group3: [],
      group4: [],
      label1: "",
      label2: "",
      options: dataset_head.filter((_, i) => i).map(it => ({ label: it, value: it }))
    }
  },
  mounted() {
    this.$nextTick().then(this.initialize)
  },
  methods: {
    changeGroup1(value = []) {
      if (value.length != 2) return

      const e1Index = dataset_head.findIndex(t => t == value[0])
      const e2Index = dataset_head.findIndex(t => t == value[1])
      const grouped = coordinate(e1Index, e2Index)
      option.title[0].text = `${value.join("-")} 元素交汇图`
      option.series[0].name = `${value.join(", ")}`
      option.series[0].data = grouped

      this.chart.setOption(option)
    },
    changeGroup2(value = []) {
      if (value.length != 2) return

      const e1Index = dataset_head.findIndex(t => t == value[0])
      const e2Index = dataset_head.findIndex(t => t == value[1])
      const grouped = coordinate(e1Index, e2Index)
      option.title[1].text = `${value.join("-")} 元素交汇图`
      option.series[1].name = `${value.join(", ")}`
      option.series[1].data = grouped

      this.chart.setOption(option)
    },
    changeGroup3(value = []) {
      if (value.length != 2) return

      const e1Index = dataset_head.findIndex(t => t == value[0])
      const e2Index = dataset_head.findIndex(t => t == value[1])
      const grouped = coordinate(e1Index, e2Index)
      option.title[2].text = `${value.join("-")} 元素交汇图`
      option.series[2].name = `${value.join(", ")}`
      option.series[2].data = grouped

      this.chart.setOption(option)
    },
    changeGroup4(value = []) {
      if (value.length != 2) return

      const e1Index = dataset_head.findIndex(t => t == value[0])
      const e2Index = dataset_head.findIndex(t => t == value[1])
      const grouped = coordinate(e1Index, e2Index)
      option.title[3].text = `${value.join("-")} 元素交汇图`
      option.series[3].name = `${value.join(", ")}`
      option.series[3].data = grouped

      this.chart.setOption(option)
    }
  }
}
</script>
<style scoped>
.echart-dashbaord {
  padding: 1rem;
}
.echart-container {
  width: 100%;
  min-height: 600px;
}
.element-crossplot .el-checkbox-group {
  display: inline-block;
}
</style>
